feat(dm-list-group-avatars): show group DM avatars#816
Open
Just-Insane wants to merge 6 commits into
Open
Conversation
Just-Insane
force-pushed
the
feat/dm-list-group-avatars
branch
from
04ddec6 to
60e0013
Compare
Just-Insane
changed the title
Just-Insane
force-pushed
the
feat/dm-list-group-avatars
branch
from
ecc56ed to
4a45973
Compare
Show multiple member avatars for group DMs in the room list and re-sort direct rooms after timeline resets so activity order recovers after limited sync.
Just-Insane
force-pushed
the
feat/dm-list-group-avatars
branch
from
76dd0d9 to
e33ab68
Compare
Just-Insane
changed the title
Contributor
There was a problem hiding this comment.
Pull request overview
Adds composite (multi-member) avatars for group DMs in the Direct Messages room list, and tightens the DM list sorting trigger behavior so recent activity is reflected promptly without stale listeners/flash states.
Changes:
- Render a 2–3 member “triangle stack” avatar for group DMs in the room nav list (
RoomNavItem+ room-nav styles). - Seed group-DM member avatar data synchronously from existing room state and add safe async cancellation (
useGroupDMMembers). - Improve DM list re-sorting by listening for
TimelineResetand forcing an initial re-sort on mount (Direct.tsx).
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/app/pages/client/direct/Direct.tsx | Updates header layout, adjusts listener lifecycle for DM activity sorting, and refactors layout around the sidebar resizer. |
| src/app/hooks/useGroupDMMembers.ts | Adds synchronous initial seeding from local room state and cancellation to avoid post-unmount updates; makes room optional. |
| src/app/features/room-nav/styles.css.ts | Adds CSS for group-DM composite avatar layout in the room nav. |
| src/app/features/room-nav/RoomNavItem.tsx | Uses useGroupDMMembers and renders the composite avatar for group DMs. |
| .changeset/dm-list-group-avatars.md | Declares a minor changeset entry for the new feature. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+272
to
+279
| <Box | ||
| shrink="No" | ||
| style={{ | ||
| width: isMobile ? '100%' : toRem(curWidth), | ||
| }} | ||
| > | ||
| <PageNav> | ||
| <DirectHeader hideText={hideText} /> |
| return ( | ||
| <VirtualTile | ||
| virtualItem={vItem} | ||
| key={vItem.index} |
| useEffect(() => { | ||
| let cancelled = false; | ||
| if (!room) { | ||
| setMembers([]); |
Comment on lines
+429
to
+433
| <Box as="span" grow="Yes" alignItems="Center" style={hideTextStyling(hideText)}> | ||
| {isGroupDM && showAvatar && groupMembers.length > 1 ? ( | ||
| // Group DM: triangle layout of mini avatars | ||
| <div className={css.GroupAvatarRow}> | ||
| {groupMembers.map((member) => { |
- Use stable roomId as VirtualTile key (prevents stale state when sort order changes) - Add getItemKey to virtualizer so it tracks items by roomId not index - Move SidebarResizer inside the position:relative Box so it positions correctly - Guard setMembers([]) with functional update to skip re-render when already empty - Scale GroupAvatarRow to 32px in hideText mode to match Avatar size='300' slot
…xt mode Add GroupAvatarRowHideText (32px) and GroupAvatarMiniHideText (18px) CSS classes for the icon-only sidebar mode. Previously only the container was scaled to 32px via inline style while mini avatars remained at 14px, leaving them sparse and misaligned. Now both container and minis use proportionally larger sizes. Addresses Copilot review comment on SableClient#816.
Just-Insane
added a commit
to Just-Insane/Sable
that referenced
this pull request
May 20, 2026
- fix(phantom-unreads): restrict badge suppression to SUPPRESSABLE_SENT_EVENT_TYPES (m.room.message / m.room.encrypted / m.sticker) and pass room+userId to isNotificationEvent to prevent state events from clearing badges (SableClient#883) - fix(dm-list-group-avatars): add GroupAvatarRowHideText/GroupAvatarMiniHideText CSS classes (32px/18px) so composite DM avatars scale properly in icon-only sidebar mode instead of leaving 14px minis in a 32px container (SableClient#816) - fix(media-cache): catch downloadMedia errors in openMediaInNewTab so a failed network response does not become an unhandled promise rejection (SableClient#870) - fix(media-cache): restore touchCacheEntry LRU tracking in useBlobCache.ts that was dropped during merge; cache hits now update the access timestamp so frequently-used entries are not prematurely evicted (SableClient#870) - fix(media-cache): restore SVG_BLOB_CACHE_MAX eviction cap and non-SVG URL fast-path in AvatarImage.useProcessedAvatarSrc that were dropped during merge; prevents unbounded memory growth and avoids a redundant fetch for every .png/.jpg/.gif/.webp avatar (SableClient#870)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Group DMs now show a composite avatar (up to three member profile pictures stacked) in the sidebar DM list, matching the visual treatment used in other Matrix clients. Avatars are seeded synchronously on mount to prevent a flash of missing images, and the profile-loading lifecycle is cleaned up to prevent stale listeners.
Fixes #
Type of change
Checklist:
AI disclosure:
The component selects up to three non-self member IDs from the room's member list, loads their
m.room.memberstate events for avatar URLs, and lays them out with CSS positioning. Avatars are synchronously seeded from any already-cached member state on mount to avoid a blank flash. TheuseEffectcleanup removes the member-event listener to prevent a stale closure from updating avatar state after the component unmounts.